<template>
  <div style="height: 100vh;">
  <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
  <el-main style="padding: 5px 10px 5px 10px;background-color: #F3F3F4;"  :style="defaultHeight" >
<!--    <el-card shadow="always" body-style="padding: 10px;" style="margin-top: 10px">
      <span class="sub-title">菜单名称：</span>
      <el-input v-model="search" placeholder="请输入菜单名称" style="width:15%" size="small" clearable></el-input>
      &lt;!&ndash;clearable:用来清空输入框&ndash;&gt;
      <el-button type="primary" style="margin-left:5px;" size="mini" @click="load()">搜索</el-button>
      &lt;!&ndash;  这里的模糊查询是根据昵称进行模糊查询的  &ndash;&gt;
    </el-card>-->
    <el-card shadow="always" body-style="padding: 10px;" style="margin-top: 10px;overflow-y: auto">
      <!--按钮区域    -->
      <div style="margin:5px">
        <el-button type="primary" size="mini">新增</el-button>
      </div>
      <!-- 列表区-->
      <el-table :data="tableTreeData" row-key="menuId" default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="menuName" label="菜单名称" align="center"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center">
          <template #default="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="url" label="菜单路径" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template #default="scope">
            <button type="button" class="el-button el-button--text el-button--mini"><!----><i
                class="el-icon-edit"></i><span>修改</span></button>
            <button type="button" @click="add(scope.row)" class="el-button el-button--text el-button--mini"><!----><i
                class="el-icon-plus"></i><span>新增</span></button>
            <button type="button" @click="del" class="el-button el-button--text el-button--mini"><!----><i
                class="el-icon-delete"></i><span>删除</span></button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="title" v-model="dialogVisible" width="30%">
        <el-form ref="menu" :model="menu" label-width="120px">
          <el-form-item label="上级菜单">
            <treeselect :value="value" v-model="menu.pid" :multiple="false" :normalizer="normalizer"
                        :options="menuOptions" placeholder="选择上级菜单"/>
          </el-form-item>

          <el-form-item label="菜单名称:">
            <el-input v-model="menu.menuName" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型:">
            <el-radio v-model="menu.menuType" label="1">目录</el-radio>
            <el-radio v-model="menu.menuType" label="2">菜单</el-radio>
          </el-form-item>

          <el-form-item label="菜单图标:">
            <e-icon-picker v-model="menu.icon" :highLightColor="highLightColor" :options="options" :zIndex="zIndex"
                           style="width:80%"/>
            <!--<e-icon :icon-name="icon"/>-->
          </el-form-item>

          <el-form-item label="菜单路由:">
            <el-input v-model="menu.url" style="width:80%"></el-input>
          </el-form-item>

        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </el-main>
  </el-scrollbar>
  </div>
</template>

<script>
import request from "../utils/request";
import Treeselect from 'vue3-treeselect'
import 'vue3-treeselect/dist/vue3-treeselect.css'
import {EIcon, EIconPicker,} from 'e-icon-picker';

export default {
  name: "Menu",
  components: {
    Treeselect, EIconPicker, EIcon
  },
  created() {
    this.load()
  },
  data() {
    return {



      title: '',
      dialogVisible: false,
      search: '',
      tableTreeData: [],
      menu: {},

      //vue_treeSelect
      value: null,
      menuOptions: [],

      //icon组件
      icon: '',
      highLightColor: "#fc1944",
      options: {FontAwesome: true},  //elementui-plus图标库没有引入进来，现暂时使用FontAwesome
      zIndex: 9999
    }
  },
  methods: {
    load() {
      request.get("/sys/menuTree", {
        params: {
          search: this.search
        }
      }).then(res => {
        this.tableTreeData = res.data
      })
    },


    //获取下拉树
    getTreeSelect() {
      request.get("/sys/menuTree").then(res => {
        this.menuOptions = res.data
      })
    },


    //新增打开弹窗方法
    add(row) {
      this.menu = {}; //清空表单中的值
      this.getTreeSelect();
      if (row != null && row.menuId) {
        this.menu.pid = row.menuId;
        this.value = row.menuName;
      } else {
        this.menu.pid = 0;
      }
      this.dialogVisible = true;
      this.title = "新增"
    },

    save() {
      request.post("/sys/saveMenu", this.menu).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        })
        this.dialogVisible = false;    //最后关闭弹窗

      })
      this.load();  //完成后，重新刷新表格数据
    },

    //列表删除提示框
    del() {
      this.$confirm('确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },


    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },

    cancel() {
      this.dialogVisible = false;
      this.menu = {};
    }


  }

}
</script>

<style scoped>
.el-button--mini {
  font-size: 12px;
}

.vue-treeselect {
  width: 80%;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}

</style>
